<template>
  <m-table
    stripe
    border
    :data="tableData"
    :options="options"
    v-model:editRowIndex="editRowIndex"
    :element-loading-svg="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    isEditRow
    pagination
    :total="total"
    paginationAlign="center"
    @sizeChange="sizeChange"
    @currentChange="currentChange"
    @confirm="confirm"
  >
    <template #date="{ scope }">
      <el-icon-timer /> {{ scope.row.date }}
    </template>
    <template #name="{ scope }">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>name: {{ scope.row.name }}</div>
          <div>address: {{ scope.row.address }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>
    <template #action="{ scope }">
      <el-button size="small" type="primary" @click="edit(scope)"
        >编缉</el-button
      >
      <el-button size="small" type="danger">删除</el-button>
    </template>
    <template #editRow>
      <el-button size="small" type="primary">确认</el-button>
      <el-button size="small" type="danger">取消</el-button>
    </template>
    <!-- <template #editCell="{ scope }">
      <div style="display: flex;">
        <el-button size="small" type="primary">确认</el-button>
        <el-button size="small">取消</el-button>
      </div>
    </template> -->
  </m-table>
</template>

<script lang="ts" setup>
import { ColumnOptions } from "../../components/table/src/types";
import { onMounted, ref } from "vue";
import axios from "axios";

let options: ColumnOptions[] = [
  {
    label: "日期",
    prop: "date",
    align: "center",
    width: "180",
    slot: "date",
    editable: true,
  },
  {
    label: "名称",
    prop: "name",
    align: "center",
    slot: "name",
  },
  {
    label: "地址",
    prop: "address",
    align: "center",
    editable: true,
  },
  {
    label: "操作",
    prop: "操作",
    align: "center",
    action: true,
  },
];

interface TableData {
  date: string;
  name: string;
  address: string;
}
let tableData = ref<TableData[]>([]);
// setTimeout(() => {
//   tableData.value = [
//     {
//       date: "2016-05-03",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-02",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-04",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//     {
//       date: "2016-05-01",
//       name: "Tom",
//       address: "No. 189, Grove St, Los Angeles",
//     },
//   ];
// }, 1);

let current = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);

let getData = () => {
  axios
    .post("/api/list", {
      current: current.value,
      pageSize: pageSize.value,
    })
    .then((res: any) => {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
      console.log(res.data);
    });
};

onMounted(() => {
  getData();
});

let editRowIndex = ref<string>("");

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

let edit = (scope: any) => {
  // console.log(scope);
  editRowIndex.value = "edit";
};

let confirm = (scope: any) => {
  console.log("父组件", scope);
};

let sizeChange = (val: number) => {
  pageSize.value = val;
  getData();
};

let currentChange = (val: number) => {
  current.value = val;
  getData();
};
</script>

<style lang="scss" scoped>
svg {
  height: 1em;
  width: 1em;
}
</style>
